import React from 'react';
import { Button, Form, Select, Field, Message } from '@teamix/ui';
import { YunxiaoIcon } from '@alife/devops-ui';
import track from 'utils/track';
import './index.scss';
import intl from '../../../../locale';

const step0Page = 'Step1';
const prefix = 'upgrade-step0';
const FormItem = Form.Item;
export default class TbBuildResultTag extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};

    this.filed = new Field(this);
  }

  componentDidMount() {
    track({
      action: 'into_step1',
    });

    this.props.getOrgSetting();
  }

  goNext = () => {
    // 如果是当前企业，不用切换直接到第二步
    const { organization } = window.FORCE;
    if (organization && organization.organization_id === this.props.selectedOrganizationId) {
      this.props.updateData({
        curStep: 1,
      });

      return;
    }
    this.props.switchOrganizations();
  };

  onChange = (value) => {
    this.props.updateData({
      selectedOrganizationId: value,
    });

    this.props.getOrgSetting();
  };

  createOrganization = () => {
    track({
      action: 'create_enterprise',
      page: step0Page,
    });

    window.location.href = `https://accountid-devops.aliyun.com/create-org?appId=5e730cf2201d20d717988e46&nextUrl=${window.location.origin}${window.location.pathname}`;
  };

  renderWarning = () => {
    const { groupVisibility, repoVisibility, orgSettingLoaded } = this.props;
    const warning = (
      <div>
        {orgSettingLoaded && !groupVisibility.includes(10) ? (
          <div className={`${prefix}-warning`}>
            {intl.get({
              id: 'code-assets.containers.step0.TheEnterpriseIsNotAuthorized',
              defaultMessage: '当前企业未授权创建「企业内公开」的组，请',
            })}
            <a href="/settings/group_permissions" target="_blank">
              {intl.get({
                id: 'code-assets.containers.step0.Authorize',
                defaultMessage: '前往授权',
              })}
            </a>
            {intl.get({
              id: 'code-assets.containers.step0.OtherwiseTheUpgradeFails',
              defaultMessage: '，否则将导致升级失败',
            })}
          </div>
        ) : null}
        {orgSettingLoaded && !repoVisibility.includes(0) ? (
          <div className={`${prefix}-warning`}>
            {intl.get({
              id: 'code-assets.containers.step0.TheEnterpriseIsNotAuthorized.1',
              defaultMessage: '当前企业未授权创建「私有」的库，请',
            })}
            <a href="/settings/repository_permissions" target="_blank">
              {intl.get({
                id: 'code-assets.containers.step0.Authorize',
                defaultMessage: '前往授权',
              })}
            </a>
            {intl.get({
              id: 'code-assets.containers.step0.OtherwiseTheUpgradeFails',
              defaultMessage: '，否则将导致升级失败',
            })}
          </div>
        ) : null}
      </div>
    );

    return warning;
  };

  render() {
    const { selectedOrganizationId, organizations, isGoStep1 } = this.props;
    return (
      <div className={`${prefix}`}>
        <div className={`${prefix}-title`}>
          {intl.get({
            id: 'code-assets.containers.step0.SelectTargetEnterprise',
            defaultMessage: '选择目标企业',
          })}
        </div>
        <div className={`${prefix}-desc`}>
          {intl.get({
            id: 'code-assets.containers.step0.YouCanSelectAnEnterprise',
            defaultMessage: '可选择你具备「拥有者」权限的企业',
          })}
        </div>
        <div className={`${prefix}-message`}>
          <Message type="notice">
            <div className="message-content">
              {intl.get({
                id: 'code-assets.containers.step0.SelectTheTargetEnterpriseWith',
                defaultMessage: '请谨慎选择目标企业，每个项目仅支持成功升级一次，',
              })}
              <span className="message-content-warning">
                {intl.get({
                  id: 'code-assets.containers.step0.TheOldVersionOfThe',
                  defaultMessage: '成功升级后老版项目将被归档，禁止写入',
                })}
              </span>
              <a
                href="https://code.aliyun.com/help/upgrade/instructions.md"
                style={{ textDecoration: 'underline' }}
                target="_blank"
                rel="noreferrer"
              >
                {intl.get({
                  id: 'code-assets.containers.step0.UpgradeInstructions',
                  defaultMessage: '升级须知',
                })}
              </a>
            </div>
          </Message>
        </div>
        <div className={`${prefix}-form`}>
          <Form inline field={this.filed}>
            <FormItem label="">
              <Select
                showSearch
                placeholder={intl.get({
                  id: 'code-assets.containers.step0.SearchForEnterprises',
                  defaultMessage: '搜索企业',
                })}
                dataSource={organizations.map((item) => {
                  return {
                    ...item,
                    value: item.organization_id,
                    label: item.organization_name,
                  };
                })}
                // onSearch={this.handleSearch}
                onChange={this.onChange}
                style={{ width: 540 }}
                value={selectedOrganizationId}
              />
            </FormItem>
            <FormItem label="">
              <Button
                type="primary"
                text
                style={{ lineHeight: '36px' }}
                onClick={this.createOrganization}
              >
                <YunxiaoIcon type="add-fill" />
                {intl.get({
                  id: 'code-assets.containers.step0.CreateAnEnterprise',
                  defaultMessage: '新建企业',
                })}
              </Button>
            </FormItem>
          </Form>
          {this.renderWarning()}
        </div>
        <div className={`${prefix}-line`} />
        <Button
          type="primary"
          onClick={this.goNext}
          disabled={!selectedOrganizationId}
          loading={isGoStep1}
        >
          {intl.get({ id: 'code-assets.containers.step0.Next', defaultMessage: '下一步' })}
        </Button>
      </div>
    );
  }
}
